<template>
  <div class="box">
    <van-nav-bar>
      <template #right>
        <van-icon name="cross" size="35px" color="black" />
      </template>
    </van-nav-bar>
    <div class="tit">
      <img src="../../../img/badge.png" alt="">
      <div class="word">
        <span>美墅装修</span>
        <p>美墅装修，美好生活</p>
      </div>
    </div>
    <van-cell-group>
      <van-field class="phone" v-model="phone" placeholder="请输入手机号" maxlength="11" />
    </van-cell-group>
    <van-cell-group>
      <van-field class="pwd" v-model="value" placeholder="请输入密码" />
    </van-cell-group>
    <button class="btn">立即登录</button>
    <div class="forget">
      <p>验证码登录</p>
      <p>忘记密码？</p>
    </div>
    <van-radio-group v-model="radio" icon-size="14px" class="radio">
      <van-radio name="1" >我已阅读并同意<a>《美墅装修用户协议》</a>和《美墅装修隐私政策》，并授权美墅装修使用本人账号信息(如昵称、头像等)进行管理</van-radio>
    </van-radio-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone: '',
      radio:'0'
    }
  },
  methods: {

  },
}
</script>

<style lang="scss" scoped>
.box {
  padding: 5px 15px;
}

.tit {
  display: flex;
  margin: 8px 10px 80px;

  .word {
    font-weight: 600;
    margin-left: 8px;
    font-size: 12px;

    span {
      font-size: 26px;
      color: #444;
    }
  }
}

.van-cell-group.van-hairline--top-bottom {
  margin: 40px 0;
}

.phone {
  font-size: 16px;
  padding: 10px 5px 0;
  border-bottom: 1px solid #ccc;
}

.pwd {
  font-size: 16px;
  padding: 0px 5px;
  border-bottom: 1px solid #ccc;
}

.btn {
  background-color: #ee7733;
  border: none;
  color: white;
  width: 100%;
  padding: 10px;
  border-radius: 16px;

  &:active {
    background-color: #e18d5c;
  }
}

.forget {
  display: flex;
  padding: 20px 0;
  justify-content: space-between;
  color: #444;
}
.radio{
  font-size: 14px;

}
</style>